<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		ul li {
			list-style: none;
		}

		#main {
			width: 100%;
			height: 260px;
			margin: 40px 5%;
		}

		.top {
			width: 100%;
		}

		#main ul li {
			width: 200px;
			height: 260px;
			float: left;
			position: relative;
		}

		#main ul li div {
			width: 100%;
			height: 260px;
		}

		#main ul li div.des {
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .3);

		}

		#main ul li div.des h4 {
			color: #FFF;
			font-size: 30px;
			padding: 30px;
			width: 30px;
			margin: 0 auto;

		}
	</style>

</head>

<body>

	<div id="top">
		<img src="img/top.png" />
	</div>
	<div id="main">
		<div>
			<ul>
				<li>
					<div class="des">
						<h4>园林酒店</h4>
					</div>
					<div style="background: url(img/1.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>设计师酒店</h4>
					</div>
					<div style="background: url(img/2.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>青年旅社</h4>
					</div>
					<div style="background: url(img/3.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>特色客栈</h4>
					</div>
					<div style="background: url(img/4.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>海岛酒店</h4>
					</div>
					<div style="background: url(img/5.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>海外温泉</h4>
					</div>
					<div style="background: url(img/6.jpg) center;"></div>
				</li>
			</ul>
	</div>
</body>
<script src="../../jquery.js"></script>
<script>
	// 1. 鼠标移入;
	// 1. 让当前元素的遮罩层隐藏;
	// 2. 让元素的宽度变成400 ， 其余的元素宽度变成160;

	// 2. 鼠标移出;
	// 让所有的元素宽度变成200
	// 让当前的元素遮罩层显示;

	$("#main li").on("mouseover" , function(){
		$(this).find(".des")
		// 此时的选择器选择到的元素是 .des 遮罩层元素;
		.hide()
		// 动画要操作的元素是this;
		// end(); => 终止最近的一个选择器，向上返回。 
		.end()
		// 向上查找了一下，找到 this ;
		.stop(true)
		.animate({
			width : 400
		})
		.siblings("li")
		.stop(true)
		.animate({
			width : 160
		})
	})


	$("#main li").on("mouseout" , function(){
		$(this).find(".des")
		.show()

		// 让所有的圆度全都还原;
		$("#main li").stop(true).animate({width : 200})
	})

</script>

</html>